<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .banner{
            width:100%;
            height:300px;
            overflow:hidden;
            position: relative;
        }
        .clearfix :after{
            content:"";
            display: block;
            clear:both;
        }
        .pic{
            position: absolute;
            height:300px;
            top:0;
            left:0;
        }
        .pic div{
            float:left;
            height:300px;
            position: relative;
            overflow: hidden;
        }
        .pic div img{
            position: absolute;
            top: 0;
            left:50%;
            margin-left:-1280px;
        }
        ul{
            width:50px;
            height:15px;
            border-radius: 10px;
            background: rgba(255,255,255,0.6);
            position: absolute;
            left: 50%;
            margin-left: -25px;
            bottom:10px;
            padding-top: 5px;
        }
        ul li{
            list-style:none;
            float: left;
            width:10px;
            height:10px;
            background:#b7b7b7;
            font-size:12px;
            color:#fff;
            margin-left:5px;
            border-radius:50%;
            text-align:center;
            cursor:pointer;
        }
        .active{
            background:#e4393c;
        }
        .pre-next{
            position: absolute;
            width: 100%;
        }
        .pre-next a{
            width:20px;
            height:40px;
            background:rgba(0,0,0,0.5);
            color: #fff;
            line-height: 40px;
            text-align: center;
            font-size: 20px;
            text-decoration: none;
            position: absolute;
            top:100px;
        }
        .pre-next .pre{
            left:0;
        }
        .pre-next .next{
            right:0;
        }
    </style>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            var banner = $('.banner');
            var pic = $('.pic');
            var aDiv = pic.children();
            var aLi = $('.banner ul li');
            var oPre = $('.pre');
            var oNext = $('.next');
            var now = 0;

            // 获取可视区宽度
            var clientW = $(window).outerWidth();
            pic.css({width:clientW*aDiv.length, left: -clientW});
            $.each(aDiv,function(i,v){
                aDiv.eq(i).css('width',clientW);
            });
            // 页面改变而改变宽度
            $(window).resize(function(){
                clientW = $(window).outerWidth();
                pic.css('width',clientW*aDiv.length+'px');
                $.each(aDiv,function(i,v){
                    aDiv.eq(i).css('width',clientW);
                });
            });

            // 鼠标移入小标动画
            aLi.mouseenter(function(){
                var thisLi = $(this);
                aLi.removeClass('active');
                thisLi.addClass('active');
                now = thisLi.index();
                console.log(-clientW*(now+1));
                pic.stop().animate({left: -clientW*(now+1)});
            });

            // 下一页
            oNext.on('click', nextPage);
            function nextPage(){
                now++;
                if(now == aLi.length){
                    oNext.off();
                    pic.stop().animate({left: -clientW*(now+1)},function(){
                        pic.css({left: -clientW});
                        oNext.on('click', nextPage);
                    });
                    now = 0;
                }else{
                    pic.stop().animate({left: -clientW*(now+1)});
                }
                aLi.removeClass('active');
                aLi.eq(now).addClass('active');
            };

            // 上一页
            oPre.on('click', prePage);
            function prePage(){
                now--;
                if(now<0){
                    oPre.off();
                    pic.stop().animate({left: -clientW*(now+1)},function(){
                        pic.css({left: -clientW * aLi.length});
                        oPre.on('click', prePage);
                    });
                    now = aLi.length -1;
                }else{
                    pic.stop().animate({left: -clientW*(now+1)});
                }
                aLi.removeClass('active');
                aLi.eq(now).addClass('active');
            }

            // 自动播放
            var timer = setInterval(function(){
                nextPage();
            },2000);
            banner.hover(function(){
                clearInterval(timer);
            },function(){
                timer = setInterval(function(){
                    nextPage();
                },2000);;
            });
        })
    </script>
    <title>自适应无限轮播</title>
</head>
<body>
    <div id="bannerBox">
        <div class="banner">
            <!-- 图片 -->
            <div class="pic clearfix">
                <!-- 最后一张复制放到第一张上面 -->
                <div><a href="#"><img src="img/banner3.png" alt=""></a></div>
                <!-- 第一张 -->
                <div><a href="#" ><img src="img/banner1.png" alt=""></a></div>
                <div><a href="#"><img src="img/banner2.png" alt=""></a></div>
                <div><a href="#"><img src="img/banner3.png" alt=""></a></div>
                <!-- 第一张复制放到最后一张后面 -->
                <div><a href="#"><img src="img/banner1.png" alt=""></a></div>
            </div>
            <!-- 上下页 -->
            <div class="pre-next">
                <a href="javascript:;" class="pre">&lt;</a>
                <a href="javascript:;" class="next">&gt;</a>
            </div>
            <!-- 小标 -->
            <ul class="clearfix">
                <li class="active"></li>
                <li></li>
                <li></li>
            </ul>
        </div>

    </div>
</body>
</html>